<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="${pageContext.request.contextPath}/static/css/reset.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/login.css?1" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/iconfont.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/static/css/index.css" rel="stylesheet">
  <link href="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="qt-base-wrap">
  <div class="qt-base-header">
    <div class="qt-base-headerWrap fn-clear">
      <div class="qt-loginImg">
        新生报道登记系统
      </div>
      <ul>
        <li>首页</li>
        <li>帮助</li>
        <li>联系我们</li>
      </ul>
    </div>
  </div>
  <main>
    <p class="title">用户注册</p>
    <ul class="qt-login-ul">
      <li>
        <p class="title"> 姓名：</p> <input type="text" name="name" class="qt-input" placeholder="请输入姓名">
      </li>
      <li>
        <p class="title"> 用户名：</p> <input type="text" name="username" class="qt-input" placeholder="请输入用户名">
      </li>
      <li>
        <p class="title"> 密码：</p> <input type="password" name="password" class="qt-input" placeholder="请输入密码">
      </li>
      <li>
        <p class="title"> 性别：</p>
        <select class="qt-input" name="sex">
          <option value="">请选择</option>
          <option value="1">男</option>
          <option value="0">女</option>
          <option value="2">未知</option>
        </select>
      </li>
      <li>
        <p class="title"> 手机号码：</p>
        <input type="text" name="phone" class="qt-input"  placeholder="请输入联系电话">
      </li>

      <li>
        <div style="text-align:center;width:100%">
          <button class="qt-loginbtn" id="loginbtn" onclick="register()">注册</button>
          <a class="qt-loginbtn" href="${pageContext.request.contextPath}/toLogin">返回</a>
        </div>
      </li>
    </ul>

  </main>
  <div class="qt-login-fonter">
    <p>Copyright © 2023 All Rights Reserved　版权所有 思维空间</p>
  </div>
</div>
<%--引入jquery库--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/layui.js"></script>
<script type="text/javascript">
  function register() {
    const name = $("input[name='name']").val().trim();
    const username = $("input[name='username']").val().trim();
    const password = $("input[name='password']").val().trim();
    const sex = $("select[name='sex']").val().trim();
    const phone = $("input[name='phone']").val().trim();
    if (!name){
      layer.msg('姓名不能为空');
      return;
    }
    if (!username){
      layer.msg('用户名不能为空');
      return;
    }
    if (!password){
      layer.msg('密码不能为空');
      return;
    }
    if (!sex){
      layer.msg('性别不能为空');
      return;
    }
    if (!/^([\u4e00-\u9fa5]{2,6})$/gi.test(name)){
      layer.msg('姓名必须为2-6个汉字');
      return;
    }
    if (!/^[a-zA-Z0-9_]+$/.test(username)){
      layer.msg('用户名只能以英文字母开头，只能包含英文字母、数字、下划线');
      return;
    }
    if (!/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{1,9}$/.test(password)){
      layer.msg('密码必须为1-9位且至少包含字母、数字、特殊字符');
      return;
    }
    if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(phone)){
      layer.msg('请输入正确格式电话号码');
      return;
    }
    const user = {
      name,
      username,
      password,
      sex,
      phone
    }
    $.ajax({
      url: 'register',
      data: JSON.stringify(user),
      type: 'POST',
      contentType: 'application/json',
      success: function (data) {
        layer.msg(data.msg);
        if (data.code === '0'){
          const inputs = $("input, select");
          for (const t of inputs){
            $(t).val('');
          }
        }
      }
    })
  }
</script>
</body>
</html>
